<template>
    <div id ="rf">
    <el-form :model="ruleForm" ref="ruleFormRef" :rules="rules" label-width="120px" class="demo-ruleForm">
        <div id="registBox">
            <div style="text-align: center;margin-bottom: 20px;margin-top: 20px;">用户注册</div>
            <el-form-item label="用户名" prop="username">
                <el-input v-model="ruleForm.username" ref="usernameinput" @blur="checkIsExist()" />

            </el-form-item>
            <el-form-item label="密码" prop="password">
                <el-input v-model="ruleForm.password" type="password" />
            </el-form-item>
            <el-form-item label="重复密码" prop="rePassword">
                <el-input v-model="ruleForm.rePassword" type="password" @blur="checkpassword" />
                <el-text style="color: red;">{{ psinfo }}</el-text>
            </el-form-item>
            <el-form-item label="邮箱" prop="email">
                <el-input v-model="ruleForm.email" type="email" />
            </el-form-item>
            <el-form-item label="电话" prop="tel">
                <el-input v-model="ruleForm.tel" type="tel" />
            </el-form-item>
            <el-form-item label="生日" prop="birthday">
                <div class="block">
                    <el-date-picker v-model="ruleForm.birthday" type="date" placeholder="Pick a day" :size="size" />
                </div>
            </el-form-item>
            <el-form-item label="爱好" prop="hobbyArr">
                <el-checkbox-group v-model="ruleForm.hobbyArr">
                    <el-checkbox label="体育" name="体育" />
                    <el-checkbox label="电影" name="电影" />
                    <el-checkbox label="电脑" name="电脑" />
                    <el-checkbox label="旅游" name="旅游" />
                </el-checkbox-group>
            </el-form-item>
            <el-form-item label="性别" prop="gender">
                <el-radio-group v-model="ruleForm.gender">
                    <el-radio label="男" />
                    <el-radio label="女" />
                </el-radio-group>
            </el-form-item>
            <el-form-item label="自我介绍" prop="description">
                <el-input v-model="ruleForm.description" type="textarea" />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit(ruleFormRef)">注册</el-button>
                <el-button type="primary" @click="resetForm">重置</el-button>
                <el-button type="primary" @click="back()">返回</el-button>

            </el-form-item>
        </div>
    </el-form>
</div>

</template>
  
<script lang="ts" setup>
import axios from 'axios';
import type { FormInstance, FormRules } from 'element-plus'
import { ref, reactive, onMounted } from 'vue'
//组合式api 使用router 导入
import { ElMessage, ElMessageBox } from "element-plus";
import { useRouter } from 'vue-router'
import type { Action } from 'element-plus'
// do not use same name with ref
const ruleFormRef = ref<FormInstance>()
interface RuleForm {
    username: string,
    password: string,
    rePassword: string,
    birthday: string,
    tel: string,
    email: string,
    hobbyArr: string[],
    hobby: string,
    resource: string,
    desc: string,
    gender: string,
    description: string
}

const ruleForm = reactive<RuleForm>({
    username: '',
    password: '',
    rePassword: "",
    birthday: "",
    tel: '',
    email: "",
    hobbyArr: [],
    hobby: "",
    resource: '',
    desc: '',
    gender: '男',
    description: ''
})

const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
}
const rules = reactive<FormRules<RuleForm>>({
    username: [
        { required: true, message: '请输入用户名', trigger: 'blur' },
        // { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' },
    ],
    password: [
        {
            required: true,
            message: '请输入密码',
            trigger: 'change',
        },
    ],
    rePassword: [
        {
            required: true,
            message: '请输入重复密码',
            trigger: 'change',
        },
    ],
    email: [
        { required: true, message: '请输入邮箱', trigger: 'blur' },
        { type: 'email', message: '邮箱格式不正确', trigger: ['blur', 'change'] },
    ],
    birthday: [
        {
            type: 'date',
            required: false,
            message: '请输入生日',
            trigger: 'change',
        },
    ],

    hobbyArr: [
        {
            type: 'array',
            required: false,
            message: '请选择你的爱好',
            trigger: 'change',
        },
    ],
    description: [
        {
            required: false,
            message: 'Please select activity resource',
            trigger: 'change',
        },
    ],
})

const psinfo = ref();
//组合式api 使用router 使用
const route = useRouter()
const back = () => {
    route.go(-1)
}
const checkpassword = () => {
    if (ruleForm.rePassword != ruleForm.password) {
        psinfo.value = "兩次密碼不一致"
    } else {
        psinfo.value = ""
    }
}
const usernameinput = ref(null)
onMounted(() => {
    console.log(usernameinput.value)
})

const checkIsExist = () => {
    axios.get("/user/checkIsExist/" + ruleForm.username)
        .then(res => {
            if (res.data.result > 0) {
                ElMessageBox.alert(res.data.msg, '提示', {
                    confirmButtonText: 'OK',
                    callback: (action: Action) => {
                        usernameinput.value.focus()
                    }
                })
            } else {
                return
            }
        })
}

const onSubmit = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {

            ruleForm.hobby = ruleForm.hobbyArr.toString()
            axios.post("/user/registUser", ruleForm).then(res => {
                if (res.data.code == 200) {
                    ElMessage({
                        type: "success",
                        message: res.data.msg,
                    });
                    back()
                } else {
                    ElMessage({
                        type: "error",
                        message: res.data.msg,
                    });
                }
            })
        } else {
            console.log('error submit!', fields)
        }
    })
}


</script>
<style scoped>
.el-form-item {
    width: 450px;
}

#rf{
   background-image: url('../assets/background.webp')

}
.el-form {
    color: #333;
    text-align: center;
    display: flex;
    display: -webkit-flex;
    justify-content: center;
    align-items: center;


}

#registBox {
    background-color: #eee;
    align-items: center;
    width: 30%;
    color: grey;
    border-radius: 15px;
    margin-top: 50px;
    margin-bottom: 50px;
}
</style>

 